<template>
  <div class="newsuit">
    <div style="font-size: 30px; margin-bottom: 50px">
      {{ form.id ? "编辑" : "新建" }}套装
    </div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="120px"
      label-position="left"
      style="width: 400px"
    >
      <el-form-item label="套装名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入套装名称"></el-input>
      </el-form-item>
      <el-form-item label="品类" prop="c_id">
        <el-select v-model="form.c_id" placeholder="请选择品类">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="形制" prop="dynasty_id">
        <el-select v-model="form.dynasty_id" placeholder="请选择形制">
          <el-option
            v-for="item in shapeAndStructureList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企划" prop="pid">
        <el-select v-model="form.pid" placeholder="请选择企划">
          <el-option
            v-for="item in layoutList"
            :key="item.id"
            :label="item.date"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input
          v-model="form.price"
          type="number"
          @input="
            form.price = form.price.match(/\d+(\.\d{0,2})?/)
              ? form.price.match(/\d+(\.\d{0,2})?/)[0]
              : ''
          "
          placeholder="请输入套装价格"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否联名" prop="j_id">
        <el-select v-model="form.j_id" :disabled="form.id" placeholder="请选择是否联名">
          <el-option
            v-for="item in steplist"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片" prop="img">
        <el-upload
          class="avatar-uploader"
          action="/"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.img" :src="form.img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="产品经理" prop="g_id">
        <el-select v-model="form.g_id" placeholder="请选择负责人">
          <el-option
            label="无"
            value="0"
          >
          </el-option>
          <el-option
            v-for="item in principalList"
            :key="item.id"
            :label="item.ad_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="default"
          style="margin-top: 50px"
          @click="onCreation('form')"
          >{{ form.id ? "修 改" : "创 建" }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  postApigetplanning,
  postApigetcategory,
  postApigetdynasty,
  postApieditsuit,
  postApiLooksuit,
  postApigetdesigner,
  uploadHomeApiupload,
  postAdminApiGetJointlystep,
} from "@/api";
export default {
  data() {
    return {
      file: "",
      steplist: [],
      form: {
        title: "", //标题
        c_id: "", //品类ID
        dynasty_id: "", //形制
        pid: "", //企划id
        price: "", // 价格
        g_id: "",
        j_id: "", // 是否联名
        img: "", // 图片
      },
      rules: {
        title: [{ required: true, message: "请输入套装名称", trigger: "blur" }],
        c_id: [{ required: true, message: "请选择品类", trigger: "blur" }],
        dynasty_id: [
          { required: true, message: "请选择形制", trigger: "blur" },
        ],
        pid: [{ required: true, message: "请选择企划月份", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        j_id: [{ required: true, message: "请选择", trigger: "blur" }],
        img: [{ required: true, message: "请上传图片", trigger: "blur" }],
      },
      layoutList: [],
      categoryList: [],
      shapeAndStructureList: [],
      principalList: [],
    };
  },
  activated() {
    this.postApigetplanning();
    this.postApigetcategory();
    this.postApigetdynasty();
    this.postApigetdesigner();
    this.postAdminApiGetJointlystep();
    console.log("this.$route.query.id", this.$route.query.id);
    if (this.$route.query.id != undefined) {
      postApiLooksuit(this.$route.query.id).then((res) => {
        console.log("套装详情--->", res);
        this.form = res.data;
      });
    }else{
      this.form= {
        title: "", //标题
        c_id: "", //品类ID
        dynasty_id: "", //形制
        pid: "", //企划id
        price: "", // 价格
        g_id: "",
        j_id: "", // 是否联名
        img: "", // 图片
      }
    }
  },
  methods: {
    // 流程列表
    postAdminApiGetJointlystep() {
      let obj = {
        page: 1,
        size: 1000,
      };
      postAdminApiGetJointlystep(obj).then((res) => {
        this.steplist = res.data;
      });
    },
    // 上传图片
    beforeAvatarUpload(file) {
      this.file = file;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let _base64 = reader.result;
        this.form.img = _base64;
      };
      return false;
    },
    // 负责人列表
    postApigetdesigner() {
      let data = {
        type: 0,
      };
      postApigetdesigner(data).then((res) => {
        this.principalList = res.data;
      });
    },
    //  创建套装
    onCreation(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let form = this.form;
          let http = form.img.substring(0, 4);
          if (http != "http") {
            await uploadHomeApiupload(this.file).then((res) => {
              console.log("图片");
              form.img = res.img;
            });
          }
          await postApieditsuit(form)
            .then((res) => {
              if (form.id) {
                this.$message.success("修改套装成功");
              } else {
                this.$message.success("新建套装成功");
              }

              this.$router.go(-1);
            })
        } else {
          this.$message.warning("请填写完整信息");
          return false;
        }
      });
    },
    // 形制列表
    postApigetdynasty() {
      postApigetdynasty().then((res) => {
        console.log("形制列表", res);
        this.shapeAndStructureList = res.data;
      });
    },
    // 品类列表
    postApigetcategory() {
      postApigetcategory().then((res) => {
        console.log("品类列表", res);
        this.categoryList = res.data;
      });
    },
    // 企划列表
    async postApigetplanning() {
      await postApigetplanning().then((res) => {
        console.log("企划列表", res);
        this.layoutList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.newsuit {
  @include global-back;
  /deep/ .el-input {
    width: 400px;
  }
}
</style>